<!--
 * @Description: 登录组件
 * @Author: hai-27
 * @Date: 2020-02-19 20:55:17
 * @LastEditors: hai-27
 * @LastEditTime: 2020-03-01 15:34:08
 -->
<template>
  <div id="myLogin">
    <!-- :visible.sync="isLogin" 可见 -->
    <el-dialog title="登录" width="300px" center :visible.sync="isLogin">
      <el-form
          :model="LoginUser"
          :rules="rules"
          status-icon
          ref="ruleForm"
          class="demo-ruleForm"
      >
        <!-- 用户名 -->
        <el-form-item prop="name">
          <el-input
              prefix-icon="el-icon-user-solid"
              placeholder="请输入账号"
              v-model="LoginUser.name"
              @blur="checkUserName"
          ></el-input>
        </el-form-item>

        <!-- 用户密码 -->
        <el-form-item prop="pass">
          <el-input
              prefix-icon="el-icon-view"
              type="password"
              placeholder="请输入密码"
              v-model="LoginUser.pass"
          ></el-input>
        </el-form-item>

        <!-- 点击登录 -->
        <el-form-item>
          <el-button
              size="medium"
              type="primary"
              @click="Login"
              style="width: 100%"
          >登录
          </el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {mapActions} from "vuex";

export default {

  // 登录组件
  name: "MyLogin",
  data() {
    let validateName = (rule , value , callback) => {
      console.log('验证用户名',rule , value , callback)
      if (!value){
        return callback(new Error('必须输入用户名'))
      }

      const nameRule = /^\w{5,16}$/
      if(nameRule.test(value)){
        return callback()
      }else{
        return callback(new Error('字母开头，长度5-16之间，允许字母数字下划线'))
      }
    };
    let validatePass = (rule , value , callback) => {
      console.log('验证密码',rule , value , callback)
      if (!value){
        return callback(new Error('必须输入密码'))
      }

      const nameRule = /^[a-zA-Z]\w{4,15}$/
      if(nameRule.test(value)){
        return callback()
      }else{
        return callback(new Error('字母开头，长度5-16之间，允许字母数字下划线'))
      }
    };
    return {
      LoginUser: {
        name: "",
        pass: ""
      },
      // 用户信息校验规则,validator(校验方法),trigger(触发方式),blur为在组件 Input 失去焦点时触发
      rules: {
        name: [
          {required: true , message: '必须输入用户名' , trigger: 'blur'},
          {validator : validateName ,trigger :'blur'}
          
          ],
          pass: [
          {required: true , message: '必须输入密码' , trigger: 'blur'},
          {validator : validatePass ,trigger :'blur'}
          
          ],
      }
    };
  },
  computed: {
    // 计算属性
    // 获取vuex中的showLogin，控制登录组件是否显示
    isLogin: {
      get() {
        return this.$store.getters.getShowLogin;
      },
      set(val) {
        // 清空表单
        this.$refs["ruleForm"].resetFields();
        // 修改集中式vuex 状态管理里的ShowLogin
        this.setShowLogin(val);
      }
    }
  },
  methods: {
    //将store中的actions方法映射到methods
    ...mapActions(["setUser", "setShowLogin"]),

    // 点击登录触发
    Login() {
      // 通过element自定义表单校验规则，校验用户输入的用户信息
      this.$refs["ruleForm"].validate(valid => {
        //如果通过校验开始登录
        if (valid) {
          // TODO 登录
          console.log("开始登录，用户名", this.LoginUser.name, "密码", this.LoginUser.pass)
          // 向后端发送请求
          this.$axios.post('/login/',this.LoginUser)
          .then(res => {
            console.log('登入的响应',res)
            if (res.data.code == 200){
              // 登入成功 隐藏对话框，清空表单
              this.isLogin = false
              // 登入成功的提示
              this.notifySucceed('登入成功')
              // 存储token
              localStorage.setItem('token' , res.data.token)
              localStorage.setItem('username' , res.data.username)
              // 将用户名存入vuex中
              this.setUser(res.data.username)

            }else{
              this.notifyError('登入失败')
            }
          })
          .catch(err => {
            return Promise.reject(err)
          })
        }else{
          return false
        }
      });
    },
    checkUserName(){

    }
  }
};
</script>


<style>
</style>
